<template>
    <div class="page coach-page">
        <div class="banner">
            <div class="banner-image"
                 style="background-image: url('/images/training_detail_banner.jpg')">
                <span>课程详情</span>
                <p>COURSE DETAILS</p>
            </div>
        </div>
        <div class="content">
            <PlatformCrumb :back="data.name" style="    margin-top: 0;">
            </PlatformCrumb>
            <!-- 富文本区域 -->
            <div class="training-content" v-if="!shoufei">
                <div class="training-content-header" style="border-bottom:0;">
                    <span>{{data.name}}</span>
                </div>
                <div class="training-content-text">
                    <div v-if="data.video" class="platform-video" style="margin-bottom:20px">
                        <video width="650" :src="data.video|filtersImg" controls="controls"></video>
<!--                        <div class="play"><img src="/images/play_icon.png"></div>-->
                    </div>
                    <img class="contentimg" :src="data.imgs|filtersImg" alt="">
                    <pre v-html="data.doc"></pre>
                </div>
            </div>
            <div class="training-content" v-if="shoufei">
                <div class="sfts">
                    <el-button type="danger" @click="ispay=true">收费课程付费后可观看</el-button>
                </div>
            </div>
        </div>
        <el-dialog
                title="支付"
                :visible.sync="ispay"
                width="70%">
            <pay :id="id2" type="2" :money="money" :ispay="ispay" @paysuccess="paysuccess"></pay>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import {getBallShowList, getCourseGet} from '../../api/api/platform.js';
    import {baseImgPath, basefile} from '@/config/env.js';
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import pay from '@/components/pay/pay';
    export default {
        components: {
            PlatformCrumb,
            pay
        },
        data() {
            return {
                id: this.$route.query.id,
                data: {
                    "address": "",
                    "banner": "",
                    "coachId": 0,
                    "courseType": 0,
                    "createTime": "",
                    "doc": "",
                    "grouping": 0,
                    "id": 0,
                    "imgs": "",
                    "mechanismId": 0,
                    "money": 0,
                    "name": "",
                    "plan": "",
                    "status": 0,
                    "type": 0,
                    "video": ""
                },
                ispay: false,
                shoufei: false,
                id2: this.$route.query.id,
                money: this.$route.query.money,
            }
        },
        created() {
            this.getispay()
        },
        methods: {
            back() {
                this.$router.go(-1);//返回上一层
            },
            ...mapActions('coachTraining', [
                'fetchTrainingDetail',
                'ordersfindPay',
            ]),
            // 支付成功返回
            paysuccess() {
                this.ispay = false
                this.shoufei = false
                this.getispay()
            },
            // 判断是否支付成功
            getispay() {
                var that = this;
                this.ordersfindPay({courseId: this.$route.query.id}).then(res => {
                    const {code, data} = res
                    if (code === 200) {
                        if (data.have) {
                            this.GetDetail()
                        } else {
                            this.ispay = true
                            this.shoufei = true
                        }
                        // console.log(data)
                        // this.dataForm = data || {}
                    }
                })
            },
            GetDetail() {
                getCourseGet({
                    "id": this.$route.query.id,
                }).then(res => {
                    this.data = res.data
                });
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            }
        }
    }
</script>

<style scoped>
    @import url("css/D-coach-training.css");

    .cur {
        cursor: pointer;
    }

    .contentimg {
        display: block;
        margin: 20px auto;
        max-width: 700px !important;
    }
    .sfts {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20px;
        padding-top: 20px;
    }
</style>
